<extend name="_Layout/mainfour"/>

<block name="style">
    <style type="text/css">

        .login{

            background-color:#FFF;
            background-repeat: repeat;
        }
        .login .navbar {
            min-height: initial;
            background: #FFF;
        }
        .login ul[role="sub-navigation"] {margin:0}
        .login .wrapper{
            max-width: 454px;
            min-width: 300px;
            margin: 100px auto 0;
            position: relative;
        }
        .login .wrapper .brand{
            margin-bottom: 20px;
            text-align: center;
        }
        .login .wrapper .brand h2{
            font-size: 22px;
            color: #FFF;
            line-height: 32px;
            margin: 0;
            font-style: italic;
            text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
        }
        .login .wrapper .widget{
            background: transparent;
            margin: 0 auto 15px;
        }
        .login .wrapper .widget .widget-body{
            background: rgba(250,250,250,1);
            -background:none;
            position: relative;
            padding: 15px;
            text-align:center;
            /*border: 2px solid #99cc99;*/
            margin-top: 20px;
            /* -webkit-box-shadow: 0 3px 2px 2px rgba(5,5,5,0.3);
            box-shadow: 0 3px 2px 2px rgba(5,5,5,0.3); */
        }
        .login .wrapper .widget .widget-body h1{
            font-size: 20pt;
            margin: 10px 0 20px 0;
            color: #686868;
        }
        .login .wrapper .widget .widget-body label{
            font-size: 14px;
            color: #7c7c7c;
            font-weight:bold;
        }

        .login .wrapper input[type="text"], .login .wrapper input[type="password"] {
            font-size: 13px;
            height: auto;
            padding: 10px 9px;
            box-shadow: none;
            /* background: #000; */
            border: 1px solid #D2D2D2;
        }
        body.login .wrapper .password {
            float: right;
            font-size: 12px;
            font-weight: 400;
        }
        body.login .wrapper .separator{padding: 0 0 20px;}

        .form-control { border:0; border-radius:0;}

        /* Navbar ============== */
        .navbar-nav > li > a {
            color: #fff;
            font-size: 12px;
            padding: 10px 15px;
        }
        .navbar-nav > li.active > a,
        .navbar-nav > li > a:active,
        .navbar-nav > li > a:focus,
        .navbar-nav > li > a:hover{
            background-color: #99cc99;
            color: #F7CB18;
        }
        .nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
            background: #99cc99;
        }

        .navbar-nav>li>.dropdown-menu {
            background: #99cc99;
            border: 0px;
            min-width:auto;
        }
        .navbar-nav>li>.dropdown-menu li a{
            color: #FFF;
            font-size: 12px;
            padding: 10px 15px;
        }
        .navbar-nav>li>.dropdown-menu li a:focus,
        .navbar-nav>li>.dropdown-menu li a:hover{
            background: #0068b2;
        }
        .dropdown-menu>.active>a,
        .dropdown-menu>.active>a:hover,
        .dropdown-menu>.active>a:focus{background: #99cc99;}

        /* Navbar Right - Language Dropdown ============== */
        [class*="language-sel-"] {
            width:16px;
            height:11px;
            top: 0px;
            margin-right:5px;
            position: relative;
            display: inline-block;
        }
        .language-sel-en{background: url(__HOME_IMG__/gb.png) no-repeat 0 0 !important}
        .language-sel-zh-CN{background: url(__HOME_IMG__/cn.png) no-repeat 0 0 !important}

        /* Button ============== */
        .btn-inverse{
            background: #45484d;
            color: #fff;
        }
        .btn-inverse:focus,
        .btn-inverse:hover{
            color: #fff;
            background: #222;
        }
        .btn {padding: 8px 12px;}

        .btn-primary {margin-bottom: 10px;}

        .btn-primary {
            color: #428bca;
            background-color: #fff;
            border-color:  #428bca;
        }

        .btn-primary:hover,
        .btn-primary:focus  {
            color: #fff;
            background-color: #428bca;
            border-color:  #428bca;
        }

        .form-group{ text-align:left;}
        /* Copyright ============== */
        .copyright{
            color: #FFF;
            text-align: center;
            text-shadow: 0px 1px 2px #000;
        }


        @media (max-width: 767px){
            .navbar-toggle .icon-bar{background: #FFF;}

            nav[role="main-navigation"]{
                float: none;
                margin: 0 !important;
            }

            ul[role="sub-navigation"]{text-align: right; margin: 0;}
            ul[role="sub-navigation"] > li{display: inline-block;}
            ul[role="sub-navigation"] .open .dropdown-menu{
                position: absolute;
                float: left;
                left: auto;
                right: 0;
                background-color: #000
            }
            ul[role="sub-navigation"] .open .dropdown-menu li a{
                text-align: left;
                padding: 5px 15px;
            }
        }
    </style>

    <link href="__HOME_CSS__/bootstrap.css" rel='stylesheet' type='text/css' />
    <script src="__HOME_JS__/jquery.min.js"></script>
    <script type="text/javascript" src="__HOME_JS__/bootstrap.min.js"></script>
    <script src="__HOME_JS__/_login.js" type="text/javascript"></script>
</block>

<block name="main">

    <header class="navbar navbar-static-top" id="top" role="header" style="background-color:#00A0E8">
        <div class="container">
            <ul class="nav navbar-nav navbar-right" role="sub-navigation">
                <li class="dropdown" id="lang_nav">
                    <a href="#" data-toggle="dropdown" style="background-color: #00A0E8!important;">
                        <span class="language-sel-zh-CN fa-lang"></span>
                        <span class="language-text">繁體中文</span>
                    </a>
                    <ul class="dropdown-menu" role="languageMenu">
                        <li><a style="background-color: #00A0E8!important;" href="{:U('Home/Lang/index')}"><span  class="language-sel-en"></span>English</a></li>

                    </ul>
                </li>
            </ul>
        </div>
    </header>


    <div class="wrapper">


        <div class="widget">
            <div class="widget-head" style="text-align:center;">
                <img src="__HOME_IMG__/logo/logo.png" alt="">
            </div>
            <div class="widget-body" style="background-color:#FFFFFF;border:3px solid #00A0E8">
                <!--<div class="alert alert-danger">
                    用戶名或密碼不正確。      </div>-->
                <form  action="{:U('Home/User/login')}" method="post">
                    <div class="form-group"> <label class="control-label" for="username">用戶名</label>
                        <input type="text" class="form-control" name="username" autofocus id="username" value="" placeholder="用戶名">
                        <span class="help-block small">您的登錄用戶名</span>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="password">密碼</label>
                        <input type="password" class="form-control"  name="password"  id="password" placeholder="登錄密碼" value="">
                        <span class="help-block small">登錄密碼</span>
                    </div>
                    <div class="form-group">
                        <span style="width:50%;float:left;"><input name="verify" type="text" class="form-control" id="mycode" title="請輸入驗證碼" placeholder="請輸入驗證碼" required ></span>
                        <span style="width:50%;"><img style="cursor: pointer;" class="verifyimg reload-verify" src="{:U('Home/User/verify')}"  height="45" id="myHeader" onClick="yanzhengma();" /></span>
                    </div>



                    <div class="separator bottom clearfix"></div>
                    <div class="row" style="text-align:center;">
                        <div class="col-md-6">
                        </div>
                        <div class="col-md-12">
                            <button class="btn btn-block btn-primary" style=" background-color:#00A0E8; border-color:#00A0E8; color:#FFFFFF" type="submit" >登錄</button>
                            <!-- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>-->
                            <!-- <script>document.getElementById('ip').value=returnCitySN["cip"];</script>-->
                            <a class="btn btn-block btn-primary" style="color: #2e6da4;background-color: #FFFFFF;border-color: #00A0E8;margin-top: 10px;"  type="button"   href="{:U('Home/User/wangji')}">忘記密碼</a>

                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--  <div class="row">
              <div class="col-md-12 text-center" style="color:#FFFFFF;">
                  <p>掃碼關注YBI微信公眾號：<br><img alt="" src="/Public/weixin.jpg"></p>
                  <p>YBI我必愛創業眾籌平台 會員社區 <br>2016  All Right Reserved</p>
                  <div class="hidden">
                      <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1257811524'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1257811524%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
                  </div>
              </div>
          </div>-->
    </div>




    <!-- <script type="text/javascript">
         $(document).ready(function($){
             $('.alert-danger').hide();
             $('input#login_btn').click(function(){
                 $('input#login_btn').attr('disabled','disabled');
                 var url = "{:U('Home/User/login')}";
                 var username = $("#username").val();
                 var password = $("#password").val();
                 var verify = $("#mycode").val();

                 $.post(url,{username:username,password:password,verify:verify},function(data){
                     if(data.sf){
                         document.location.href='/';
                     }else{
                         console.log(data.nr);
                         if(data.nr){
                             window.location="{:U('Home/User/center')}";
                         }else{
                             $('.alert-danger').html('登錄失敗,').show();
                         }
                         $('input#login_btn').removeAttr("disabled");
                     }
                 },'json');
             });

             $('#username').focus();

             $.removeCookie("alert", { path: '/' });
         });
     </script> -->

</block>
